<template>
  <div class="d-flex-c right-map-menu">
    <div class="menu-icon-box m-b-mini">
      <div
        class="menu-icon"
        v-for="(item,index) in topMenus"
        :key="index"
        :title="item.label"
        @click="handleClickMenu(item.key)"
      >
        <BKSvgIcon
          :icon-class="`svg-ysqxx-${item.key}`"
          class="f-16 c-white"
        />
      </div>
    </div>
    <div class="menu-icon-box">
      <div
        class="menu-icon"
        v-for="(item,index) in bottomMenus"
        :key="index"
        :class="{'active':activeMenu ==item.key}"
        :title="item.label"
        @click="handleClickMenu(item.key)"
      >
        <BKSvgIcon
          :icon-class="`svg-ysqxx-${item.key}`"
          class="f-16 c-white"
        />
      </div>
    </div>
    <LocatePanel
      v-show="locatePanelVisible"
      ref="locatePanel"
      :is-global="false"
      @close="handleClosePanel('locatePanel')"
      @confirmLocate="confirmLocate"
      style="left: -10px;transform: translateX(-100%);top: 10px;"
    />
    <SearchPanel
      v-show="searchPanelVisible"
      ref="searchPanel"
      :is-global="false"
      @confirmLocate="confirmLocate"
      @close="handleClosePanel('searchPanel')"
      extend-pop-class="ysqxx-map-search"
      style="left: -10px;transform: translateX(-100%);top: 10px;"
    />
    <LayerController
      ref="layerController"
      v-show="layerControllerVisible"
      :is-global="true"
      :tree-query-params="queryParams"
      @close="handleClosePanel('layerController')"
      style="left: -10px;transform: translateX(-100%);top: 10px;"
    />
  </div>
</template>
<script>
import LocatePanel from '@/components/geo-map/locate-panel.vue'
import SearchPanel from '@/components/geo-map/search-panel.vue'
import LayerController from '@/components/geo-map/layer-controller.vue'
// 可选中样式的menu-key
const activeMenus = ['search', 'layer', 'location']
const defaultLayerIds = ['ysqxx_SWSW', 'ysqxx_SZ', 'ysqxx_SQ', 'ysqxx_DXS']
export default {
  name: 'YsqxxRightIconMenu',
  components: {
    LocatePanel,
    SearchPanel,
    LayerController
  },
  data () {
    return {
      topMenus: [{
        label: '放大',
        key: 'add'
      },
      {
        label: '缩小',
        key: 'subtract'
      },
      {
        label: '全貌',
        key: 'earth'
      }],
      bottomMenus: [
        {
          label: '搜索',
          key: 'search'
        },
        {
          label: '定位',
          key: 'location'
        },
        // {
        //   label: '图层',
        //   key: 'layer'
        // },
        // {
        //   label: '飞行',
        //   key: 'fly'
        // },
        {
          label: '测距',
          key: 'measure'
        },
        {
          label: '测面',
          key: 'surface'
        },
        {
          label: '图层',
          key: 'layer'
        }
        // {
        //   label: '定位',
        //   key: 'location'
        // }
        // {
        //   label: '返回',
        //   key: 'back'
        // }
      ],
      activeMenu: '',
      locatePanelVisible: false,
      searchPanelVisible: false,
      layerControllerVisible: false,
      queryParams: {
        appId: 'YSJC',
        bzCode: 'YSJC',
        treeConfigId: 'YSJC_HBYZT_TCZS_TREE',
        node: 'ROOT',
        regExp: '',
        sync: false,
        bigData: false,
        queryParams: {
          bzCode: 'YSJC'
        }
      }
    }
  },
  methods: {
    handleClickMenu (key) {
      console.log('handleClickMenu', { key })
      if (activeMenus.includes(key)) {
        this.activeMenu = this.activeMenu === key ? '' : key
      } else {
        this.activeMenu = ''
        this.locatePanelVisible = false
        this.searchPanelVisible = false
        this.layerControllerVisible = false
      }
      switch (key) {
        case 'add':
          this.setZoom('fangda')
          break
        case 'subtract':
          this.setZoom('suoxiao')
          break
        case 'search':
          this.togglePanel('searchPanel')
          break
        case 'earth':
          this.handleQuanMao()
          break
        case 'location':
          this.togglePanel('locatePanel')
          break
        case 'layer':
          this.togglePanel('layerController')
          break
        case 'measure':
          this.$mapManager.invoke('invokeUtils', 'ceju', {})
          break
        case 'surface':
          this.$mapManager.invoke('invokeUtils', 'cemian', {})
          break
      }
    },
    handleClosePanel (key) {
      this[`${key}Visible`] = false
      this.activeMenu = ''
    },
    setZoom (type) {
      this.$mapManager.invoke('setZoom', type)
    },
    async confirmLocate (location, info) {
      await this.$mapManager.invoke('setCenterAndZoom', location)
      this.$mapManager.getMapComponent().map1.tipsPopup.show(location, `<div>${info.address || info.name}</div>`)
    },
    togglePanel (name) {
      const panelNames = ['searchPanel', 'locatePanel', 'layerController']
      panelNames.splice(panelNames.indexOf(name), 1)
      for (const n of panelNames) {
        this[`${n}Visible`] = false
        this.$refs[n].reset()
      }
      this[`${name}Visible`] = !this[`${name}Visible`]
      this.$nextTick(() => {
        if (this[`${name}Visible`]) {
          this.$refs[name].focus()
        } else {
          this.$refs[name].reset()
        }
      })
    },
    handleQuanMao () {
      const businessLayerIds = this.$mapManager.getMapComponent().map1.layerManager.getAllLayer().filter(id => id.startsWith('ysqxx'))
      this.$mapManager.invoke('setLayerVisible', businessLayerIds.join(','), false)
      this.$mapManager.invoke('setLayerVisible', defaultLayerIds.join(','), true)
      this.$mapManager.emit('updateLayer')
      this.setZoom('quanmao')
    }
  }
}
</script>
<style lang="scss" scoped>
.right-map-menu {
  height: 100%;
  width: fit-content;
}

.menu-icon-box {
  background: #042976b8;
  border: 1px solid #0386c873;
  border-radius: 4px;

  .menu-icon {
    width: 24px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;

    &:not(:last-child) {
      border-bottom: 1px solid #06436e91;
    }

    &:hover,
    &.active {
      background: #0355ce;
    }
  }
}

</style>
